<template xmlns:v-on="http://www.w3.org/1999/xhtml">
	<div class="set" style="height: 100%;">
		<div class="addAttendance">
			<span class="numeDuce" @click="oneCheck">
				数据导出
			</span>
			<span class="numeDuces" @click="twoCheck">
				考勤统计
			</span>
			<span id="record" @click="DataExportRecord">
				数据导出记录
			</span>
		</div>
		<div class="unData" v-show="datalist.length == 0">暂无数据</div>
		<div class="dataTable" v-show="datalist.length > 0">
			<div class="main_rightMain">
				<div class="noticNav">
					<span>导出文件名称</span>
					<span>导出人员</span>
					<span>导出时间</span>
					<span>操作</span>
				</div>
				<ul>
					<li v-for="(item,index) in datalist" :key="index">
						<div class="noticNavs">
							<span>{{item.fileName}}</span>
							<span>{{item.name}}</span>
							<span>{{item.createTime | Date}}</span>
							<span class="listButton">
								<span class="loadBut" @click='loadClick(index)'></span>
								<span class="delectBut" @click='delectClick(index)'></span>
							</span>
						</div>
					</li>
				</ul>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
					 :page-size="pageSizeVal" layout="total, sizes, prev, pager, next, jumper" :total="totalVal">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="delectFixed" v-show='delectShow'>
			<div class="delectBox">
				<div class="delectTile">
					提示
				</div>
				<div class="delectTop">
					确定要删除此条数据记录吗？
				</div>
				<div class="delectFoot">
					<el-button type="primary" @click="okDelectClick()">确 定</el-button>
					<el-button type="info" @click="cancelDelectClick()">取 消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	require("../../../../API/config.js");
	import { mapActions } from "vuex";
	export default {
		name: "set",
		data() {
			return {
				totalVal: 0,
				currentPage: 1,
				pageSizeVal: 10,
				datalist: [],
				delectShow: false,	//删除弹框
				deleteId: '',	//删除id
			};
		},
		created: function () {
			let self = this;
			var accessToken = sessionStorage.getItem("accessToken");
			if (accessToken) {
				//  获取列表
				self.getList()
			}
		},
		methods: {
			//获取列表
			getList() {
				let self = this
				self.datalist = []
				self.getfindexportlogpage({
					companyId: sessionStorage.getItem("ORGID"),
					pageNo: self.currentPage,
					pageSize: self.pageSizeVal,
				}).then(data => {
					if (data.statusCode == 200) {
						if (data.data.records) {
							data.data.records.forEach(ele => {
								self.datalist.push({
									id: ele.id ? ele.id : null,
									fileName: ele.fileName ? ele.fileName : '暂无',
									name: ele.name ? ele.name : '暂无',
									createTime: ele.createTime ? ele.createTime : null,
									link: ele.link ? ele.link : null
								})
							});
						}
						self.totalVal = data.data.total * 1
					} else {
						self.message(data.statusMessage)
					}
				}).catch(msg => {
					self.message('服务器异常')
				})
			},
			handleSizeChange(val) {
				this.pageSizeVal = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getList()
			},
			oneCheck: function () {
				this.$router.push({
					path: "/home/examine/dataExport"
				});
			},
			twoCheck: function () {
				this.$router.push({
					path: "/home/examine/statistics"
				});
			},
			DataExportRecord() {
				this.$router.push({
					path: "/home/examine/dataExportRecord"
				});
			},
			//删除
			delectClick(index) {
				this.delectShow = true
				this.deleteId = this.datalist[index].id
			},
			//确认删除
			okDelectClick() {
				this.delectShow = false
				let self = this
				self.getdeleteexportlog({
					id: self.deleteId
				}).then(data => {
					if (data.statusCode == 200) {
						self.getList()
					} else {
						self.$message(data.statusMessage)
					}
				}).catch(msg => {
					self.$message('服务器异常')
				})

			},
			//取消删除
			cancelDelectClick() {
				this.delectShow = false
			},
			//下载
			loadClick(index) {
				if (this.datalist[index].link == null) {
					this.$message('服务器异常')
				} else {
					window.open(this.datalist[index].link);
				}
			},
			...mapActions(["getfindexportlogpage", 'getdeleteexportlog'])
		},
		filters: {
			typeFun(val) {
				if (val == 1) {
					return "是";
				} else {
					return "否";
				}
			},
			Date(val) {
				if (val) {
					var now = new Date(Number(val));
					var year = now.getYear() - 100;
					var month = now.getMonth() + 1;
					month = month > 9 ? month : "0" + month;
					var date = now.getDate();
					date = date > 9 ? date : "0" + date;
					var hour = now.getHours();
					hour = hour > 9 ? hour : "0" + hour;
					var minute = now.getMinutes();
					minute = minute > 9 ? minute : "0" + minute;
					return (
						"20" + year + "-" + month + "-" + date + " " + hour + ":" + minute
					);
				} else {
					return "暂无";
				}
			}
		},
	};
</script>
<style scoped>
	.el-table {
		border: none !important;
	}

	.addAttendance {
		height: auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		margin-left: 16px;
		margin-right: 16px;
		padding-top: 20px;
		padding-bottom: 12px;
		color: #303030;
		font-size: 14px;
	}

	.numeDuce {
		border-radius: 4px;
		padding: 5px 15px;
		cursor: pointer;
	}

	.numeDuces {
		border-radius: 4px;
		padding: 5px 15px;
		cursor: pointer;
	}

	#record {
		color: #38adff;
		cursor: pointer;
	}

	.recordTable {
		width: 90%;
		margin-left: 20px;
		margin-top: 20px;
	}

	.pagination {
		float: right;
		margin: 20px;
	}

	.dataTable {
		text-align: center;
		width: 95%;
		height: auto;
		margin-left: 10px;
	}

	.addTitle {
		float: right;
		margin-top: -40px;
		margin-right: 30px;
		cursor: pointer;
		width: 70px;
		height: 30px;
		background-color: #38adff;
		color: #ffffff;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		border-radius: 4px;
	}



	.main_rightTop p:nth-child(1) {
		color: #303030;
		font-size: 14px;
		padding-top: 24px;
		padding-bottom: 12px;
		margin-left: 44px;
		border-bottom: 1px solid #d9d9d9;
	}

	.main_rightTop {
		width: 100%;
	}

	.main_rightMain {
		margin-left: 44px;
		width: calc(100% - 88px);
	}

	.noticNav {
		width: 100%;
		height: 48px;
		line-height: 48px;
		background: #f4f4f6;
		margin-top: 20px;
	}

	.noticNavs {
		width: 100%;
		height: 48px;
		line-height: 48px;
	}

	.noticNavs>span {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		float: left;
		width: 25%;
		text-align: center;
	}

	.noticNav span {
		float: left;
		width: 25%;
		text-align: center;
	}

	ul li {
		height: 48px;
		border-bottom: 1px solid #d9d9d9;
	}

	ul li>p {
		height: 48px;
		line-height: 48px;
		margin-left: 24px;
		cursor: pointer;
	}

	.biaoti {
		float: left;
	}

	.unread {
		float: left;
		margin-left: 189px;
	}

	.grayfont {
		color: #8f8e94;
	}

	.borderStyle {
		cursor: pointer;
		font-size: 12px;
		color: #fcb298;
		width: 48px;
		display: inline-block;
		border: 1px solid #fcb298;
		height: 20px;
		line-height: 20px;
		border-radius: 17px;
		text-align: center;
	}

	.unData {
		width: 100%;
		color: #303030;
		font-size: 20px;
		text-align: center;
		margin-top: 100px;
	}

	.listButton {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 48px;
	}

	.loadBut {
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url('../../../../static/img/load.png') no-repeat;
		margin: 0 12px;
		cursor: pointer;
	}

	.delectBut {
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url('../../../../static/img/delect.png') no-repeat;
		margin: 0 12px;
		cursor: pointer;
	}

	.delectFixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 100000;
	}

	.delectBox {
		width: 340px;
		height: 180px;
		background-color: #fff;
		border: 1px solid #fff;
		box-shadow: 0 2px 4px 0 #dbdbdb;
		border-radius: 4px;
		margin: calc((100vh - 280px) / 2) auto;
		z-index: 100000;
		animation: madalsBox 0.8s;
	}

	@keyframes madalsBox {
		from {
			transform: translateY(-200px);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.delectTile {
		text-align: center;
		font-size: 20px;
		margin-top: 20px;
	}

	.delectTop {
		font-size: 15px;
		text-align: center;
		margin: 24px 0 25px;
		width: 100%;
		height: 25px;
	}

	.delectFoot {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.delectFoot>button {
		margin: 0 12px;
	}
</style>